<template>
  <div class="mt-1">
    <van-form>
      <h4 style="color: gray">
        <span style="margin: 0 0 0.4rem 1rem"
          >当前产区:{{ this.$store.getters.productionLine }}</span
        >
        <span style="margin: 0 0 0.4rem 1rem"
          >当前投料口描述:{{ this.deviceCode }}</span
        >
      </h4>
      <van-field
        clearable
        v-model="deviceCode"
        label="投料口"
        ref="sbfocus"
        @focus="stopKeyboradFirst"
        placeholder="请扫描投料口"
      />
      <van-field
        v-model="code"
        clearable
        label="拍码"
        ref="pmfocus"
        @focus="stopKeyborad"
        placeholder="请扫描拍码"
      />
      <ag-grid-vue
        style="width: 100%; height: 60vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="multiple"
        :rowData="rowData"
      >
      </ag-grid-vue>
      <Printpassword
        v-model="passwordVisble"
        :em_password="em_password"
        @PasswordSuccess="PasswordSuccess"
      />
      <audio src="../../assets/warning.mp3" preload="auto" id="bgMusic"></audio>
      <van-popup
        v-model="ShowStatue"
        position="bottom"
        style="height: 100%"
        class="bg-default"
      >
        <order-data
          :ShowDataA="ShowData"
          @get-val="SureBottom"
          v-if="ShowStatue"
        />
      </van-popup>
    </van-form>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import { CODE_LENGTH } from "../../config";
import { mapGetters } from "vuex";
import { parseQRCode, toast } from "../../utils/common";
import { AgGrid } from "../../mixins/AgGrid";
import { Picker } from "vant";
import {
  DeviceMaterial,
  commissionSubmit,
  DeviceGive,
  SerachList,
} from "../../api/feeding";
import { pat } from "../../api/material";
import Printpassword from "../../components/Printpassword.vue";
import OrderData from "../../components/OrderData.vue";

export default {
  name: "Device",
  components: { AgGridVue, [Picker.name]: Picker, Printpassword, OrderData },
  mixins: [AgGrid],
  data() {
    return {
      code: "",
      deviceCode: "",
      em_password: "",
      ShowStatue: false,
      passwordVisble: false,
      columnDefs: [
        { headerName: "物料号", field: "ProductId", width: 90 },
        { headerName: "物料名称", field: "ProductName", width: 125 },
        { headerName: "生产日期", field: "ProductionDate", width: 100 },
        {
          headerName: "数量",
          field: "Num",
          width: 70,
        },
      ],
      rowData: [],
      columns: [],
      matrialData: [],
      qrcode: {},
      ShowData: {},
    };
  },
  computed: {
    ...mapGetters(["productionLine"]),
  },
  watch: {
    deviceCode(val) {
      let result = this.columns.find((it) => it.DeviceCode === val);
      if (result) {
        this.deviceCode = val;
        this.getdeviceMaterial(val);
        this.$refs.pmfocus.focus();
      } else {
        this.playMusic();
        toast("不存在此设备号");
        this.deviceCode = "";
      }
    },
    code(val) {
      if (this.deviceCode.length === 0) {
        this.playMusic();
        toast("请先输入设备号");
      } else if (val.length > CODE_LENGTH) {
        let res = parseQRCode(val);
        this.qrcode = JSON.parse(JSON.stringify(res));
        if (res) {
          this.testMaterial(res.palletNo, res.materialCode);
        }
      }
      this.code = "";
      this.$refs.pmfocus.focus();
    },
  },
  methods: {
    //消除焦点
    stopKeyboradFirst() {
      this.$refs.sbfocus.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.sbfocus.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    // 消除获取焦点时自动弹出键盘
    stopKeyborad() {
      this.$refs.pmfocus.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.pmfocus.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    //获取设备值
    async getDeviceInfo() {
      let res = await DeviceGive("DeviceFeeding", this.productionLine);
      if (res && res.data.Status == 200 && res.data.Data) {
        this.columns = JSON.parse(JSON.stringify(res.data.Data));
        console.log(res);
      } else {
        this.playMusic();
        toast("无法获取设备选项，请联系管理员");
      }
    },
    //获取扫描后的物料号
    async getdeviceMaterial(deviceNum) {
      let res = await DeviceMaterial(
        this.productionLine,
        "DeviceFeeding",
        deviceNum
      );
      console.log(res);
      this.matrialData = res.Data.SKUItems;
    },
    //添加至表格
    async SureBottom(val, palletNo, materialCode) {
      this.ShowStatue = false;
      let user = this.$store.getters.user;
      let productionline = this.$store.getters.productionLine;
      let res = await commissionSubmit(
        productionline,
        palletNo,
        materialCode,
        "3",
        user,
        "2",
        this.deviceCode,
        this.$store.getters.WarehouseId,
        "",
        "",
        val
      );
      console.log(res);
      if (res && res.Status == 200 && res.Data) {
        this.rowData.push({
          ProductName: this.ShowData.ProductName,
          ProductId: this.ShowData.ProductId,
          UniqueId: this.ShowData.UniqueId,
          Num: val,
          ProductionDate: this.ShowData.ProductionDate.substring(0, 10),
          OutStorageBillDetailId: this.ShowData.OutStorageBillDetailId,
        });
        toast(res.Msg);
      } else {
        this.playMusic();
        toast(res.Msg);
      }
      this.$refs.pmfocus.focus();
    },
    //验证物料是否属于当前设备，若是则提交
    async testMaterial(palletNo, materialCode) {
      if (this.matrialData.indexOf(materialCode) !== -1) {
        //验证BQS
        let result = await pat(
          this.$store.getters.productionLine,
          palletNo,
          "U",
          this.$store.getters.WarehouseId,
          "3"
        );
        console.log(result);
        if (result.Status == 200) {
          switch (result.Data.BQSStatus) {
            case 1:
              this.em_password = result.Data.AuthPwd;
              this.passwordVisble = true;
              break;
            case 0: //投放数据
              this.findDevice(palletNo, materialCode);
              this.$refs.pmfocus.focus();
              break;
            case 2:
              this.playMusic();
              toast(result.Msg);
              break;
            default:
              this.findDevice(palletNo, materialCode);
              this.$refs.pmfocus.focus();
              break;
          }
        } else {
          this.playMusic();
          toast(result.Msg);
        }
      } else {
        this.playMusic();
        toast("物料号不匹配");
      }
      this.$refs.pmfocus.focus();
    },
    PasswordSuccess() {
      console.log("1");
      this.findDevice(this.qrcode.palletNo, this.qrcode.materialCode);
    },
    //播放警示音
    playMusic() {
      setTimeout(() => {
        let audio = document.getElementById("bgMusic");
        audio.play();
      }, 200);
    },
    //展示数据
    async findDevice(palletNo) {
      let productionline = this.$store.getters.productionLine;
      let res = await SerachList(
        productionline,
        palletNo,
        this.$store.getters.WarehouseId
      );
      if (res.Status == 200 && res.Data) {
        this.ShowStatue = true;
        this.ShowData = JSON.parse(JSON.stringify(res.Data));
      } else {
        this.playMusic();
        toast(res.Msg);
      }
      console.log(res);
    },
  },
  mounted() {
    this.getDeviceInfo();
    this.$refs.sbfocus.focus();
  },
};
</script>
